<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>21.使用jQ选择器完成下拉列表左右选择</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			
			//========================================注意:双击写法有bug========================================
			
			$(function(){
				/*1.选中单击去右边*/
				$("#select1ToRight").click(function(){
					$("#select1 option:selected").appendTo($("#select2"));
				});
				
				/*2.单击全部去右边*/
				$("#selectAllToRight").click(function(){
					$("#select1 option").appendTo($("#select2"));
				});
				
				/*3.选中双击去右边*/
				$("#select1 option").dblclick(function(){
					$("#select1 option:selected").appendTo($("#select2"));
				});
				
				//4.单击移动到左侧
				$("#select1ToLeft").click(function(){
					$("#select2 option:selected").appendTo($("#select1"));
				});
				
				//5.全部移动到左侧
				$("#selectAllToLeft").click(function(){
					$("#select2 > option").appendTo($("#select1"));
				});
				
				//6.双击去左侧
				$("#select2 > option").dblclick(function(){
					$("#select2 > option:selected").appendTo($("#select1"));
				});
			});
		</script>
	
	</head>
	<body>
		<table border="1" width="600" align="center">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><textarea rows="4" cols="20">手机数码类商品</textarea></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="select1">
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a href="#" style="padding-left: 20px;" id="select1ToRight">移到右侧(可以双击移动)&gt;&gt;</a></p>
						<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">全部移到右侧&gt;&gt;&gt;</a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="select2">
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a href="#" id="select1ToLeft">&lt;&lt;移到左侧(可以双击移动)</a></p>
						<p><a href="#" id="selectAllToLeft">&lt;&lt;&lt;全部移到左侧</a></p>
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type='submit' value="修改"/>
				</td>
			</tr>
		</table>
		
		<xmp>
			<script>
			
				//========================================注意:双击写法有bug========================================
				
				$(function(){
					/*1.选中单击去右边*/
					$("#select1ToRight").click(function(){
						$("#select1 option:selected").appendTo($("#select2"));
					});
					
					/*2.单击全部去右边*/
					$("#selectAllToRight").click(function(){
						$("#select1 option").appendTo($("#select2"));
					});
					
					/*3.选中双击去右边*/
					$("#select1 option").dblclick(function(){
						$("#select1 option:selected").appendTo($("#select2"));
					});
					
					//4.单击移动到左侧
					$("#select1ToLeft").click(function(){
						$("#select2 option:selected").appendTo($("#select1"));
					});
					
					//5.全部移动到左侧
					$("#selectAllToLeft").click(function(){
						$("#select2 > option").appendTo($("#select1"));
					});
					
					//6.双击去左侧
					$("#select2 > option").dblclick(function(){
						$("#select2 > option:selected").appendTo($("#select1"));
					});
				});
			</script>
		</xmp>
	</body>
</html>
